header {
  background-color: #fff;
  h1 {
    color: #000;
  }
}

.empty {
  display: none;
  position: relative;
  height: 100vh;
  background: #f5f5f5 url(../images/empty.png) no-repeat center 25%;
  background-size: 37.3333vw 24.5333vw;
  p {
    position: absolute;
    white-space: nowrap;
    top: 40%;
    left: 50%;
    font-size: 3.7333vw;
    color: #808080;
    transform: translate(-50%);
  }
  button {
    position: absolute;
    width: 29.3333vw;
    height: 8.5333vw;
    top: 47%;
    left: 50%;
    border: 0;
    background: linear-gradient(90deg, #f9211c, #ff6335);
    font-size: 4.2667vw;
    color: #fff;
    border-radius: 4.2667vw;
    transform: translate(-50%);
  }
}

.main {
  padding: 11.7333vw 2.1333vw 26.6667vw;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10.6667vw;
    padding: 0 1.8667vw;
    color: #333;
    font-size: 3.7333vw;
    .left {
      span {
        color: #fa2209;
      }
    }
  }

  // 渲染模块
  .items {
    .item {
      display: flex;
      justify-content: space-between;
      height: 34.6667vw;
      background-color: #fff;
      margin-bottom: 3.2vw;
      padding: 4vw 2.1333vw;
      border-radius: 1.3333vw;
      input {
        width: 4.8vw;
      }
      img {
        width: 26.6667vw;
        height: 26.6667vw;
      }
      .info {
        width: 56.0533vw;
        height: 26.6667vw;
        h3 {
          margin-bottom: 8vw;
          font-size: 3.7333vw;
          color: #303133;
          font-weight: normal;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 52.8533vw;
          height: 6.6667vw;
          .price {
            font-size: 3.2vw;
            color: #fa2209;
            span {
              font-size: 4.2667vw;
            }
          }
          .num {
            display: flex;
            justify-content: space-between;
            width: 28.2667vw;
            height: 6.6667vw;
            button {
              width: 8vw;
              height: 6.6667vw;
              border: 0;
            }
            span {
              width: 10.6667vw;
              height: 6.6667vw;
              background-color: #f2f3f5;
              text-align: center;
              line-height: 6.6667vw;
            }
          }
        }
      }
    }
  }

  // 固定模块
  .footer {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    bottom: 13.6vw;
    width: 100vw;
    height: 12.8vw;
    padding: 0 4vw;
    background-color: #fff;
    font-size: 3.7333vw;
    color: #303133;
    .left {
      input {
        width: 4.8vw;
        height: 4.8vw;
        vertical-align: middle;
      }
    }
    .right {
      .total {
        display: inline-block;
        font-size: 3.2vw;
        color: #fa2209;
        span {
          font-size: 4.2667vw;
        }
      }
      button {
        width: 26.6667vw;
        height: 9.6vw;
        margin-left: 4vw;
        background: linear-gradient(90deg, #f9211c, #ff6335);
        border: 0;
        border-radius: 4.8vw;
        font-size: 3.7333vw;
        color: #fff;
        &:disabled {
          background: #ff9779;
        }
      }
    }
  }
}

// 小红点
footer {
  a {
    &.active {
      position: relative;
      i {
        position: absolute;
        top: -1vw;
        right: -1vw;
        width: 4.2667vw;
        height: 4.2667vw;
        border-radius: 50%;
        background-color: #f43530;
        color: #fff;
        font-size: 3.2vw;
        font-style: normal;
      }
    }
  }
}
